
<template>

  <div class="material-add-box">

    <!-- <div class="draglistmove"> -->
    <div v-if="!readonly&&limitedLength(imgList)<limited" class="list-item">
      <div class="img-upload-container">
        <!-- :image-size="4096" -->
        <qup-img-uploader
          ref="refUploader"
          :width="40"
          :height="40"
          mask
          :limit="limited"
          :image-url="coverPic.absoluteUrl"
          :relative-url="coverPic.relativeUrl"
          @upload-success="uploadSuccess"
          @remove="deleteImage"
        />
        <!-- 大小100*40 -->
      </div>
    </div>
    <div v-for="(item,index) in imgList" v-show="item.dr===0" :key="index" class="list-item">
      <div class="item-image">
        <el-image
          :src="VUE_APP_IMG_PREFIX+item.attachmentUrl"
          fit="contain"
          @click.native="handlePreviewImg(item)"
        />

        <div v-if="!readonly" class="btn-group">
          <i class="el-icon-delete" @click.stop="handlePhotoDelete(item,index)" />
          <!-- <div class="btn-del" >删除</div> -->
        </div>
      </div>
      <!-- <div class="item-name">
        <el-input v-model="item.attachmentName" size="mini" placeholder="请输入图片名" maxlength="50" @change="changeName(item)" />
      </div> -->
    </div>
    <!-- </div> -->

    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :on-close="handleCloseImg"
      :url-list="[previewImg]"
    />

  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { filterURL } from '@/utils'
import Sortable from 'sortablejs'
import QupImgUploader from '@/components/imgUploader'
export default {
  name: 'AddImg',
  components: { QupImgUploader, ElImageViewer },
  props: {
    configAttachmentId: {// 模板配置类型
      type: String,
      default: ''
    },
    limited: {
      type: Number,
      default: 1
    },
    otherParam: {
      type: [String, Number],
      default: ''
    },
    readonly: {
      type: Boolean,
      default: false
    },
    configAttachmentType: {// 模板配置类型
      type: String,
      default: ''
    },
    fileType: {
      type: String,
      default: 'png,jpg,jpeg'
    },
    photoList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      previewImg: '', // 图片预览
      imgDialogVisible: false,
      url: `/pdf-file/`,
      submiting: false,
      formData: {
        pic: ''
      },
      imgList: [],
      coverPic: {
        absoluteUrl: '',
        relativeUrl: ''
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {

    photoList: {
      handler(v) {
        this.imgList = v
      },
      immediate: true
    }
  },
  mounted() {
    // this.listmove()
  },
  // created() {
  //   this.imgList = this.photoList
  // },
  methods: {
    limitedLength(imgList) {
      return imgList.filter(v => !v.dr).length
    },
    // 拖拽排序功能
    listmove() {
      const el = document.querySelector('.draglistmove')
      Sortable.create(el, {
        onEnd: e => {
          const s = e.newIndex
          const o = e.oldIndex
          setTimeout(() => {
            const data = this.imgList[s]
            this.imgList[s] = this.imgList[o]
            this.imgList[o] = data
            this.$emit('upload-success', { img: {}, list: this.imgList, otherParam: this.otherParam })
          }, 100)
        }
      })
    },
    // 删除图片
    handlePhotoDelete(item, index) {
      this.imgList[index].dr = 1
      const tempArr = this.imgList.filter(el => el.dr === 0)
      this.$emit('remove', { img: item, list: this.imgList, imgLength: tempArr.length, otherParam: this.otherParam })
    },

    // 图片上传成功回调处理
    uploadSuccess(response) {
      const imgItem = {
        attachmentUrl: (response.data && response.data.attachmentUrl) || '', // 文件路径
        remark: (response && response.msg) || '', // 备注
        attachmentName: (response.data && response.data.attachmentName) || '', // 文件名
        id: (response.data && response.data.id) || '', // id
        typeName: (response.data && response.data.typeName) || '', // 附件类型
        createTime: (response.data && response.data.createTime) || '', // 创建时间
        createBy: (response.data && response.data.createBy) || '', // 创建人
        attachmentType: this.configAttachmentType || '', // 附件类型
        dr: (response.data && response.data.dr) || 0, // 删除标志
        // configAttachmentId: (response.data && response.data.id) || '', // 附件模板配置id todo
        // modelId: (response.data && response.data.id) || '', // 附件模板配置id todo
        configAttachmentId: this.configAttachmentId || ''// 附件类型

      }
      this.imgList.push(imgItem)
      const tempArr = this.imgList.filter(el => el.dr === 0)
      this.$emit('upload-success', {
        img: imgItem,
        list: this.imgList,
        imgLength: tempArr.length,
        otherParam: this.otherParam
      })
      this.$refs.refUploader.handleBeforeRemove()
    },
    changeName(res) {
      this.$emit('upload-success', { img: res, list: this.imgList, otherParam: this.otherParam })
    },
    // 下载文件
    handleDownload(a) {

    },
    // 预览图片
    handlePreviewImg(data) {
      this.imgDialogVisible = true
      this.previewImg = filterURL(data.attachmentUrl)
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    // 移除图片处理
    deleteImage() {
      this.formData.pic = ''
      this.coverPic = {
        absoluteUrl: '',
        relativeUrl: ''
      }
    }
  }
}

</script>
<style lang='scss' scoped>
  .material-add-box{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    // width: 300px;
    height:60px;
    .list-item{
      margin: 12px 4px;
      width: 40px;
      // height: 100px;
      box-sizing: border-box;
      .item-image{
        position: relative;
        width: 40px;
        height: 40px;
        border: 1px solid #d8d8d8;
        overflow: hidden;
        margin-bottom: 5px;
        .el-image{
          width: 40px;
          height: 40px;
        }
        .btn-group{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          display: none;
          height: 40px;
          line-height: 30px;
          background:rgba($color: #000000, $alpha: .5);
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: #fff;
          .btn-download,.btn-del{
            cursor: pointer;
          }
          .btn-download{
            margin-left: 20px;
            text-decoration: none;
            color: #fff;
          }
        }
        &:hover .btn-group{
          display: flex;
        }
      }
      .item-name{
        line-height: 30px;
        height: 30px;
        text-align: center;
        overflow: hidden;
        /deep/ .el-input__inner{
          width: 100%;

        }
      }
    }

  }
  .img-upload-container {
    width: fit-content;
    .icon-msg{
      width: 40px;
      display: block;
      padding: 5px 0;
      line-height: 18px;
      color: #999;
    }
  }
</style>
